<template>
  <a-modal
    :body-style="{ padding: '0 0' }"
    :visible="visible"
    width="45%"
    title="完善信息"
    cancel-text="关闭"
    unmount-on-close
    :mask-closable="false"
    :ok-loading="loading"
    @close="onCancel"
    @ok="onOk"
    @cancel="onCancel"
  >
    <a-alert>
      <template #icon>
        <icon-exclamation-circle />
      </template>
      {{ modalAlert }}
    </a-alert>
    <div class="modal-body mt-4">
      <page-form class="modal-form" :model="form" layout="vertical" ref="formRef" :rules="rules">
        <div v-if="type === 'person'">
          <div class="mb-4">OTA渠道车辆信息: {{ orderDetails.channelModelName }}</div>
          <div class="mb-4">渠道车牌号: {{ orderDetails.channelCarLicenseNo }}</div>
          <page-form-item field="relationCarId" label="商户车牌号" required>
            <remote-select
              v-model="form.relationCarId"
              popup-container=".page-container"
              placeholder="请选择"
              :params="{ id: form.oldId }"
              type="car_licenseno_list"
              @change="onChange"
            />
          </page-form-item>
        </div>
        <div v-if="type === 'business'">
          <page-form-row gutter="24">
            <page-form-item size="1/2" field="linkman" label="企业联系人姓名" required>
              <i-input placeholder="请输入" v-model="form.linkman" :max-length="20" />
            </page-form-item>
            <page-form-item size="1/2" field="mobile" label="联系人手机号" required>
              <i-input placeholder="请输入" v-model="form.mobile" :max-length="11" />
            </page-form-item>
          </page-form-row>
        </div>
      </page-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { isMobile } from '@/utils/validate'
  import { saveChannelPlate } from '@/api/business/ota'
  import { clientupdate } from '@/api/market/clientInfo'
  import { Message } from '@arco-design/web-vue'
  import { createContractCarAPI } from '@/api/order/sOrder'

  const props = defineProps({
    type: {
      type: String,
      default: 'person',
    },
    modalAlert: {
      type: String,
      default: '',
    },
  })
  const visible = ref(false)
  const loading = ref(false)
  const orderDetails = ref()
  const form = ref<any>({})
  const formRef = ref()
  const emits = defineEmits(['onOk'])

  const validateFn = (value: string, cb: (msg?: string) => void) => {
    if (!value || value == '') {
      cb('请输入联系人手机号')
    } else {
      if (!isMobile(value)) {
        cb('手机号格式不正确')
      }
    }
  }
  const rules = {
    relationCarId: { required: true, message: '请选择商户车牌号' },
    linkman: { required: true, message: '请输入企业联系人姓名' },
    mobile: { required: true, validator: validateFn },
  }

  const onOpen = (order: any) => {
    console.log(order, 'order')

    orderDetails.value = order
    visible.value = true
    form.value = {
      business: order?.business,
      channelCarLicenseNo: order.channelCarLicenseNo,
      accountId: order.accountId,
      linkman: order?.business?.linkman,
      mobile: order?.business?.mobile,
    }
  }

  const carInfo = ref()
  const onChange = (value: string, options: any) => {
    carInfo.value = options
  }

  const onCancel = () => {
    visible.value = false
    form.value = {}
    loading.value = false
  }

  const onOk = () => {
    console.log(form.value, 'form.value')
    formRef.value.validate((error: any) => {
      if (!error) {
        loading.value = true
        // if 为企业用户
        if (props.type === 'business') {
          clientupdate({ ...form.value.business, linkman: form.value.linkman, mobile: form.value.mobile })
            .then((res: any) => {
              console.log(res, 'res')
              emits('onOk')
              visible.value = false
              Message.success('保存成功，请重新点击生成电子合同')
            })
            .finally(() => {
              loading.value = false
            })
        } else {
          createContractCarAPI({
            channelCarLicenseNo: form.value.channelCarLicenseNo,
            accountId: form.value.accountId,
          }).then((res: any) => {
            const { result } = res
            saveChannelPlate({ ...result, ...form.value })
              .then((res: any) => {
                console.log(res, 'saveChannelPlate')
                visible.value = false
                emits('onOk')
                Message.success('保存成功，请重新点击生成电子合同')
              })
              .finally(() => {
                loading.value = false
              })
          })
        }
      }
    })
  }
  defineExpose({
    onOpen,
  })
</script>

<style lang="less" scoped>
  .modal-body {
    padding: 0 20px;
  }
</style>
